<template>

      <div class="super-flow-demo1">
        <div class="flow-container"
             ref="flowContainer"
             @wheel="mouseWheel($event)"
             @click="flowNodeClick">
          <super-flow
            @toJSON="toJSON"
            ref="superFlow"
            :link-addable="false"
            :link-editable="false"
            :graph-menu="graphMenu"
            :node-menu="nodeMenu"
            :link-menu="linkMenu"
            :link-base-style="linkBaseStyle"
            :link-style="linkStyle"
            :link-desc="linkDesc"
            :node-list="nodeList"
            :link-list="linkList">
            <template v-slot:node="{meta}">
              <div @mouseup="nodeMouseUp" @click="nodeClick"
                   :class="meta.type? `flow-node-${meta.type}`: ''"
                   class="flow-node ellipsis">
                <div class="node-content" :title="meta.name">{{ meta.name }}</div>
              </div>
            </template>
          </super-flow>
        </div>
      </div>



</template>

<script>
  import SuperFlow from 'vue-super-flow'
  //import 'vue-super-flow/lib/index.css'
  import '../../../../public/css/vue-super-flow-index.css'

  const drawerType = {
    node: 0,
    link: 1
  }

  export default {
    components: {
      SuperFlow
    },
    data() {
      return {
        nodeList: [],
        linkList: [],
        drawerType,
        drawerConf: {},
        dragConf: {
          isDown: true,
          isMove: true,
          offsetTop: 0,
          offsetLeft: 0,
          clientX: 0,
          clientY: 0,
          ele: null,
          info: null
        },
        graphMenu: [],
        nodeMenu: [],
        linkMenu: [],

        linkBaseStyle: {
          color: '#666666', // line 颜色
          hover: '#FF0000', // line hover 的颜色
          textColor: '#666666', // line 描述文字颜色
          textHover: '#FF0000', // line 描述文字 hover 颜色
          font: '14px Arial', // line 描述文字 字体设置 参考 canvas font
          dotted: false, // 是否是虚线
          lineDash: [4, 4], // 虚线时生效，虚线长度和间隔长度
          background: 'rgba(255,255,255,0.6)' // 描述文字背景色
        },
      }
    },
    mounted() {
      this.queryList();
      //document.addEventListener('mousemove', this.docMousemove)
      //document.addEventListener('mouseup', this.docMouseup)
      // this.$once('hook:beforeDestroy', () => {
      //   document.removeEventListener('mousemove', this.docMousemove)
      //   document.removeEventListener('mouseup', this.docMouseup)
      // });
      // 创建连接线
      // this.createLink(this.nodeList[0], this.nodeList[1]);
      // this.createLink(this.nodeList[1], this.nodeList[2]);
      // this.createLink(this.nodeList[1], this.nodeList[3]);
      // this.createLink(this.nodeList[3], this.nodeList[2]);
    },
    methods: {
      mouseWheel(event) {
        if(event.isTrusted){
          let zom = this.$refs.flowContainer.style.zoom;
          if(!zom){
            zom = 100;
          }else if(zom.indexOf('%') > 0){
            zom = parseInt( zom.substring(0, zom.length - 1));
          }
          if(event.deltaY > 0){
            if(zom < 40 ){
              zom = 40;
            }
            this.$refs.flowContainer.style.zoom = (zom - 2) + "%";
          }else{
            if(zom > 150 ){
              zom = 150;
            }
            this.$refs.flowContainer.style.zoom = (zom + 2) + "%";
          }
        }
      },
      queryList() {
        let maxH = 700;
        this.dataListLoading = true
        let obj = {
          "bizCode": "BJ",
          "batchCode": "BT01",
          "taskCode": "",
          "includeChild": false,
        }
        obj = Object.assign(obj, this.searchForm)
        this.getTableList('/api/dependon/map', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000') {
            let maxCol = data.maxCol;
            let maxRow = data.maxRow;
            let oneSh = 120;
            if ((oneSh + 40) * maxRow > maxH) {
              oneSh = maxH / maxRow - 40;
            }
            if (data.nodes && data.nodes.length > 0) {
              data.nodes.forEach(node => {
                let one = {
                  id: node.bizCode + node.batchCode + node.taskCode + node.jobCode,
                  coordinate: [(node.x - 1) * 140 + 50, oneSh * (node.y - 1) + 50],
                  width: 130,
                  height: 40,
                  meta: {
                    name: '' + node.name,
                    type: 'B' == node.selfType ? 'start' : 'process'
                  }
                };
                this.nodeList.push(one);
              })
            }
            if (data.links && data.links.length > 0) {
              data.links.forEach(link => {
                let pid = link.dpdonBizCode + link.dpdonBatchCode + link.dpdonTaskCode + link.dpdonJobCode;
                let id = link.bizCode + link.batchCode + link.taskCode + link.jobCode
                this.createLink(pid, id);
              });
            }
          }
        })
      },
      flowNodeClick() {
        // console.log(this.$refs.superFlow.graph)
        // const data = this.$refs.superFlow.toJSON()
        // console.log(data)
      },
      toJSON(data) {
        // console.log(data)
      },
      /**
       * 通过ID创建连线
       * @param {nomber} 连线开始节点id
       * @param {nomber} 连线结束节点id
       */
      createLink(startID, endID) {
        this.linkList.push({
          id: '' + startID + '-' + endID,
          startId: startID,
          endId: endID,
          startAt: [110, 60], // 连线位置,粗略试了一下,第一个是控制左右的(小于等于100在左边开始, 大于100右边开始)
          endAt: [60, 0],
          meta: null,
        })
      },
      linkStyle(link) {
        if (link.meta && link.meta.desc === '1') {
          return {
            color: '#FF00FF',
            hover: '#FF00FF',
            dotted: true
          }
        } else {
          return {}
        }
      },
      linkDesc(link) {
        return link.meta ? link.meta.desc : ''
      },
      nodeMouseUp(evt) {
        evt.preventDefault()
      },
      nodeClick() {
        // console.log(arguments)
      },
      docMousemove({clientX, clientY}) {
        // const conf = this.dragConf
        // if (conf.isMove) {
        //   if(conf.ele ){
        //     conf.ele.style.top = clientY - conf.offsetTop + 'px'
        //     conf.ele.style.left = clientX - conf.offsetLeft + 'px'
        //   }
        //
        // } else if (conf.isDown) {
        //   // 鼠标移动量大于 5 时 移动状态生效
        //   conf.isMove = Math.abs(clientX - conf.clientX) > 5 || Math.abs(clientY - conf.clientY) > 5
        // }
      },
      docMouseup({clientX, clientY}) {
        // const conf = this.dragConf
        // conf.isDown = false
        //
        // if (conf.isMove) {
        //   const {
        //     top,
        //     right,
        //     bottom,
        //     left
        //   } = this.$refs.flowContainer.getBoundingClientRect()
        //
        //   // 判断鼠标是否进入 flow container
        //   if (
        //     clientX > left && clientX < right && clientY > top && clientY < bottom
        //   ) {
        //     // 获取拖动元素左上角相对 super flow 区域原点坐标
        //     const coordinate = this.$refs.superFlow.getMouseCoordinate(
        //       clientX - conf.offsetLeft,
        //       clientY - conf.offsetTop
        //     )
        //     // 添加节点
        //     this.$refs.superFlow.addNode({
        //       coordinate,
        //       ...conf.info
        //     })
        //   }
        //   conf.isMove = false
        // }
        // if (conf.ele) {
        //   conf.ele.remove()
        //   conf.ele = null
        // }
      },

    }
  }
</script>
